<template>
	<view class="hazardouswaste">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="container">
			<view class="top-wrap">
				<view class="add-wrap">
					<view class="search-wrap">
						<uni-datetime-picker start-placeholder="日" end-placeholder="期" rangeSeparator="—"
							type="daterange" @change="changDate" />
						<button class="search" @click="getList">查询</button>
					</view>
					<button class="add" @click="addWasteType">新增</button>
				</view>
				<div class="sel-wrap">
					<uni-data-select v-model="params.wastetype" placeholder="涉废类型"
						:localdata="adviceTypeList"></uni-data-select>
					<!-- 	<uni-data-select class="two" placeholder="废物种类" v-model="value"
						:localdata="range"></uni-data-select> -->
				</div>
			</view>
		</view>
		<view class="content-wrap" v-if="dataList.length>0">
			<view class="item" v-for="item in dataList" :key="item.id">
				<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/beijing-icon.png"
					class="line" mode=""></image>
				<view class="title-name">
					涉废类型：{{ getmodule?.find(i => i.id == item.wastetype).name}}
				</view>
				<view class="wrap">
					<view class="advice-name">
						处置单位：{{enterPriseList?.find(i=>i.id==item.disposeenterpriseid)?.enterprisename }}</view>
					<view class="advice-num">涉废类型：{{ getmodule?.find(i => i.id == item.wastetype).name}}</view>
					<view class="advice-num">处置量：{{item.wastenum}}kg</view>
					<view class="advice-num">处置联单编号：{{item.orderno}}</view>
					<view class="advice-num">处置联单图片：<text style="color: #0874FA;"
							@click="searchImage(item.disposeimgurl)">点击查看</text> </view>
					<view class="advice-num">处置时间：{{item.commitdate.split(' ')[0]}} </view>
				</view>
			</view>




		</view>
		<view class="no-data" v-if="dataList.length==0">
			<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/noe-data.png" mode="">
			</image>
			<text>暂无内容</text>
		</view>
	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import uploadFile from '../../request/uploadFile.js'
	import http from '../../request/index.js'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from 'vue'
	let name = "处置"
	let enterPriseList = ref([])
	let params = reactive({})
	let single = ref('')
	let showLine = ref('none')
	let value = ''
	let getmodule = ref([])
	let dataList = ref([])
	let adviceTypeList = ref([])

	let changDate = (e) => {
		console.log(e, 'e');
		if (e.length == 0) {
			showLine.value = 'none'
			params.enddate = ''
			params.startdate = ''
		} else {
			showLine.value = 'block'
			params.startdate = e[0]
			params.enddate = e[1]
		}
	}
	let getList = () => {

		http({
			url: '/wasteDispose/datalist',
			data: params
		}).then((res) => {
			if (res.code == 0) {
				dataList.value = res.data.list
			}

		})
	}
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B03'
		}
	}).then((res) => {
		if (res.code == 0) {

			getmodule.value = res.data
			console.log(getmodule.value, 'getmodule');
			let aa = getmodule.value.find(item => item.id == 2)
			console.log(aa, 'aa');
		}

	})
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B04'
		}
	}).then((res) => {
		if (res.code == 0) {
			console.log(res, 'bo4');
		}

	})
	let searchImage = (item) => {
		if (!item) {
			uni.showToast({
				title: '暂无图片',
				icon: "none"
			})
			return
		}
		let urls = item.split(',')
		uni.previewImage({
			urls,
			current: 0
		});
	}
	onShow(() => {
		getList()

	})
	http({
		url: '/enterpriseThird/listThirdEnterprises'
	}).then((res) => {
		console.log(res, 'res123');
		if (res.code == 0) {
			enterPriseList.value = res.data
		}
	})
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B03'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			adviceTypeList.value = data.map((item) => {
				return {
					text: item.name,
					value: item.id
				}
			})

		}

	})
	let addWasteType = () => {
		uni.navigateTo({
			url: "/homePageOther/addwastetype/addwastetype"
		})
	}
</script>

<style lang="scss" scoped>
	.no-data {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-top: 200rpx;

		image {
			width: 365rpx;
			height: 325rpx;
		}

		text {
			margin-top: 45rpx;
			font-weight: 400;
			font-size: 31rpx;
			color: #666666;

		}
	}

	:deep(.range-separator) {

		display: v-bind('showLine');
		// height: 65rpx !important;
		// line-height: 63rpx !important;
	}

	:deep(.uni-date) {
		height: 100% !important;
		border: none !important;
	}

	:deep(.uni-date-editor) {
		height: 100% !important;
		border: none !important;
	}

	:deep(.uni-date-x) {
		height: 100% !important;
		border: none !important;
		flex: none
	}

	:deep(.uni-date-editor--x) {
		height: 100% !important;
		border: none !important;
	}

	:deep(.uni-date__x-input) {

		font-weight: 400;
		font-size: 25rpx;
		color: #999999;

	}

	:deep(.uni-select__input-text) {

		font-weight: 400;
		font-size: 28rpx;
		color: #333333;

	}



	:deep(.uniui-clear) {

		font-size: 36rpx !important;
	}

	:deep(.uni-icons) {
		margin-left: 4rpx;
		font-size: 36rpx !important;
	}

	:deep(.uni-select) {
		border: none;
		width: 200rpx;
		width: 137rpx;

		font-weight: 400;
		font-size: 28rpx;
		color: #333333;

	}

	.hazardouswaste {
		width: 100vw;
		height: 100vh;
		padding-top: 160rpx;
		overflow: hidden;

		.title-bgc {
			background: #0874FA;
			height: 160rpx;
			width: 100vw;
			position: fixed;
			top: 0%;
			left: 0;

		}

		.content-wrap {
			height: calc(100vh - 160rpx - 192rpx);
			background: #F0F2F5;
			width: 100vw;
			overflow: scroll;
			padding: 17rpx 20rpx 55rpx 30rpx;

			.item {
				height: 524rpx;
				background: #FFFFFF;
				border-radius: 14rpx;
				position: relative;
				margin-top: 20rpx;

				.line {
					position: absolute;
					width: 100%;
					top: 81rpx;
					height: 25rpx;
					left: 0;
				}

				.wrap {
					height: calc(524rpx - 93rpx);
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
				}

				.title-name {
					height: 93rpx;
					line-height: 93rpx;
					font-weight: 500;
					font-size: 31rpx;
					color: #333333;
					padding-left: 33rpx;

				}

				.advice-name,
				.advice-num {

					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					padding-left: 34rpx;

				}

				.img-wrap {
					padding-left: 36rpx;

					.update-next {
						margin-top: 32rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;

						.blue {
							color: #0874FA;
						}
					}

					.update-img-pre {
						display: flex;
						align-items: center;
						margin-top: 27rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;

						.blue {
							color: #0874FA;
						}

						.pre {}

						.padding {
							margin-left: 68rpx;
						}
					}
				}

				.bgc-wrap {
					margin-top: 22rpx;
					padding: 0 19rpx 0 16rpx;

					.bgc-color-wrap {
						width: 100%;
						height: 310rpx;
						background: #E5EAEF;
						border-radius: 14rpx;
						padding-left: 19rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-evenly;

						view {
							display: flex;
							font-weight: 400;
							font-size: 28rpx;
							color: #666666;

							.name {
								width: 387rpx
							}

							.val {}
						}
					}
				}
			}

			.item:first-child {
				margin-top: 0rpx !important;
			}

		}

		.container {

			padding: 0 30rpx;

			.top-wrap {
				height: 192rpx;
				background-color: #fff;

				.sel-wrap {
					display: flex;
					height: calc(192rpx - 75rpx - 31rpx);
					align-items: center;

					.two {
						margin-left: 120rpx;
					}
				}

				.add-wrap {
					display: flex;
					align-items: center;

					.add {
						width: 112rpx;
						height: 74rpx;
						background: #0874FA;
						border-radius: 14rpx;

						font-weight: 500;
						font-size: 31rpx;
						color: #FFFFFF;
						margin: 0;
						padding: 0;
						margin-top: 31rpx;
						margin-left: 16rpx;
					}

					.search {
						background: #FAA708 !important;
					}
				}

				.search-wrap {
					width: 561rpx;
					height: 75rpx;
					background: #FFFFFF;
					border-radius: 14rpx;
					border: 1px solid #E5E5E5;
					display: flex;
					align-items: center;
					margin-top: 31rpx;
					padding-left: 25rpx;

					button {
						width: 112rpx;
						height: 74rpx;
						background: #0874FA;
						border-radius: 14rpx;
						font-weight: 500;
						font-size: 31rpx;
						color: #FFFFFF;
						flex-shrink: 0;
						margin: 0;
						padding: 0;
					}
				}
			}

		}





	}
</style>